<template>
	<view>
		<view class="color-change" :style="{ 'background-color': isAct ? boxActColor : boxColor }" @click="changeColor">
			<view class="item-box" :style="{ left: isAct ? 'calc(100% - 43rpx)' : '3rpx', 'background-color': isAct ? btnActColor : btnColor }">
				<image v-if="isIcon" class="color-img" :src="isAct ? actIcon : icon" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		// 选中图标
		actIcon: {
			type: String,
			default() {
				return require('./color-1.png');
			}
		},
		// 未选中图标
		icon: {
			type: String,
			default() {
				return require('./color-2.png');
			}
		},
		// 是否显示图标
		isIcon: {
			type: Boolean,
			default() {
				return true;
			}
		},
		// 选中的按钮背景色
		btnActColor: {
			type: String,
			default() {
				return '#ffffff';
			}
		},
		// 未选中的按钮背景色
		btnColor: {
			type: String,
			default() {
				return '#ffffff';
			}
		},
		// 选中框的背景色
		boxActColor: {
			type: String,
			default() {
				return '#243044';
			}
		},
		// 未选中选中框的背景色
		boxColor: {
			type: String,
			default() {
				return '#e6e6e6';
			}
		},
		// 是否选中状态
		isActive:{
			type: Boolean,
			default(){
				return false
			}
		}
	},
	data() {
		return {
			isAct: this.isActive
		};
	},
	methods: {
		changeColor() {
			this.isAct = !this.isAct;
			this.$emit('changeSwitch',this.isAct)
		}
	}
};
</script>

<style lang="scss" scoped>
.color-change {
	width: 90rpx;
	height: 44rpx;
	border-radius: 22rpx;
	position: relative;
	// background-color: #243044;
	background-color: #e6e6e6;
	transition: all 0.3s ease;
	.item-box {
		position: absolute;
		left: 3rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 40rpx;
		height: 40rpx;
		background-color: #ffffff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
		box-shadow:0 3rpx 5rpx 0 rgba(0,0,0,.3);
		.color-img {
			width: 24rpx;
			height: 24rpx;
			transition: all 0.3s ease;
		}
	}
}
</style>
